<script lang="tsx">
import {
  defineComponent,
  defineProps,
  defineEmits,
  useSlots,
  useAttrs,
} from "vue";
import type { PropType } from "vue";
import { Tools, Refresh, Menu } from "@element-plus/icons-vue";

export default defineComponent({
  name: "VxeTableBar",
  props: {
    title: {
      type: String,
      default: "列表",
    },
    vxeTableRef: {
      type: Object as PropType<any>,
    },
    columns: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    data: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    tree: {
      type: Boolean,
      default: false,
    },
    isExpandAll: {
      type: Boolean,
      default: true,
    },
    tableKey: {
      type: [String, Number] as PropType<string | number>,
      default: "0",
    },
    pagination: {
      type:Object as PropType<any>,
    },
  },
  setup(props) {
 
    
   
    return () => (
      <div class="vxe-table-bar-container">
        <div class="header">
          <div class="title">{props.title}</div>
          <div class="actions">
            <div class="box-item">
              <el-tooltip effect="dark" content="列设置" placement="top">
                <el-icon>
                  <Menu />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="box-item">
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-icon>
                  <Refresh />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="box-item">
              <el-tooltip effect="dark" content="列设置" placement="top">
                <el-icon>
                  <Tools />
                </el-icon>
              </el-tooltip>
            </div>
          </div>
        </div>

        <pure-table
          locale="zhCn"
          columns={props.columns}
          data={props.data}
          pagination={props.pagination}
          border
        ></pure-table>
      </div>
    );
  },
});
</script>

<style lang="scss" scoped>
.vxe-table-bar-container {
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.title {
  font-size: 20px;
  font-weight: 800;
}
.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .box-item {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
}
</style>
